<template>
    <el-dialog  title="修改地址"
                :visible.sync="message"
                @close="resetFields"
                :show-close="false"
                width="40%">
        <span>
            <el-form label-position="left" :rules="orderRules" ref="orderRef">
                <el-form-item label="省市区/县">
                    <el-cascader
                            :options="citydata"
                            :props="cascaderProps"
                            ></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="position">
                    <el-input placehoder="请输入详细地址"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="editOrder">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import citydata from "../../../assets/js/citydata";
    export default {
        name: "EditOrderDia",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        data(){
            return {
                citydata:citydata,
                cascaderProps:{
                    label:'label',
                    value:'value',
                    expandTrigger: 'hover'
                },
                orderRules:{
                    position:[{required:true,message:'请输入详细地址'}]
                },
            }
        },
        methods:{
            resetFields(){
                this.$refs.orderRef.resetFields()
            },
            quit(){
                this.$bus.$emit('editOrder');
            },
            editOrder(){
                this.$bus.$emit('editOrder');
            },
        },
    }
</script>

<style scoped>

</style>